<template>
  <div>
    <van-cell v-for="(item, idx) in list" :key="idx" :title="item.title">
      <div slot="label">
        <!-- 文字说明 -->
        <div class="meta">
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ item.pubdate }}</span>
        </div>
      </div>
    </van-cell>
    <van-button type="primary" @click="add">添加文章</van-button>
    <van-button type="primary" @click="deletes">删除文章</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "天天向上",
          aut_name: "李林森",
          comm_count: 1,
          pubdate: 2002
        },
        {
          title: "好好学习",
          aut_name: "李林森",
          comm_count: 1,
          pubdate: 2002
        }
      ]
    };
  },
  methods: {
    add() {
      const res = [
        {
          title: "好好学习,天天向上",
          aut_name: "李林森",
          comm_count: 1,
          pubdate: Date.now()
        }
      ];
      // es6解构和push增加数组的内容
      this.list.push(...res);
    },
    deletes() {
      let leg = this.list.length;
      this.list.splice(leg - 1, 1);
    }
  }
};
</script>
